<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Upload from "./Upload.svelte";
    import { Button } from "../Button";
    import Icon from "@iconify/svelte";
    import { createUniqueId } from "../utils/createUniqueId";
    import { Space } from "../Space";

    const { Story } = defineMeta({
        title: "Components/Form/Upload",
        component: Upload,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });
</script>

<Story name="Default">
    {#snippet template(args)}
        <Upload>
            <Button type="primary">{#snippet icon()}<Icon icon="f7:cloud-upload-fill" />{/snippet}Upload Files</Button>
        </Upload>
    {/snippet}
</Story>

<Story name="DefaultFiles">
    {#snippet template(args)}
        <Upload
            value={[
                {
                    uid: -1,
                    name: "file1.png",
                    status: "finished",
                    preview: true,
                    url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
                },
            ]}
        >
            <Button type="primary">{#snippet icon()}<Icon icon="f7:cloud-upload-fill" />{/snippet}Upload Files</Button>
        </Upload>
    {/snippet}
</Story>

<Story name="Drag">
    {#snippet template(args)}
        <Upload type="drag" accept="jpg,png">
            <div class="cm-upload-drag-wrap" style="display: flex; flex-direction: column; align-items:center; justify-content: center;">
                <Icon icon="f7:cloud-upload-fill" width={32} color="var(--cui-color-primary)" />
                <p>Click or drag files here to upload</p>
            </div>
        </Upload>
    {/snippet}
</Story>

<Story name="Picture">
    {#snippet template(args)}
        <Upload
            value={[
                {
                    uid: -1,
                    name: "file1.png",
                    status: "finished",
                    preview: true,
                    url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
                },
            ]}
            listType="picture"
        >
            <Icon icon="f7:plus" width={32} />
        </Upload>
    {/snippet}
</Story>

<Story name="Multiple">
    {#snippet template(args)}
        <Upload multiple>
            <Button type="primary">{#snippet icon()}<Icon icon="f7:cloud-upload-fill" />{/snippet}Upload Files</Button>
        </Upload>
    {/snippet}
</Story>

<Story name="MaxCount">
    {#snippet template(args)}
        <Upload maxCount={1}>
            <Button type="primary">{#snippet icon()}<Icon icon="f7:cloud-upload-fill" />{/snippet}Upload Files</Button>
        </Upload>
    {/snippet}
</Story>

<Story name="customRequest">
    {#snippet template(args)}
        <Upload
            maxCount={1}
            customRequest={async ({ file, onProgress, onSuccess, onError }) => {
                for (let i = 0; i <= 100; i++) {
                    await new Promise((resolve) => setTimeout(resolve, 100));
                    onProgress({ percent: i });
                }

                onSuccess({
                    success: true,
                    fileSaveId: createUniqueId(),
                });
            }}
        >
            <Button type="primary">{#snippet icon()}<Icon icon="f7:cloud-upload-fill" />{/snippet}Upload Files</Button>
        </Upload>
    {/snippet}
</Story>

<Story name="renderFileOperation">
    {#snippet template(args)}
        <Upload
            maxCount={1}
            customRequest={async ({ file, onProgress, onSuccess, onError }) => {
                for (let i = 0; i <= 100; i++) {
                    await new Promise((resolve) => setTimeout(resolve, 100));
                    onProgress({ percent: i });
                }

                onSuccess({
                    success: true,
                    fileSaveId: createUniqueId(),
                });
            }}
        >
            {#snippet renderFileOperation(file, actions)}
                <Space>
                    <Icon icon="f7:eye" />
                    <Icon icon="f7:cloud-download-fill" />
                    <Icon icon="f7:trash" onclick={actions.remove} />
                </Space>
            {/snippet}
            <Button type="primary">{#snippet icon()}<Icon icon="f7:cloud-upload-fill" />{/snippet}Upload Files</Button>
        </Upload>
    {/snippet}
</Story>

<Story name="hideClear&retry">
    {#snippet template(args)}
        <Upload showClear={false} showRetry={false}>
            <Button type="primary">{#snippet icon()}<Icon icon="f7:cloud-upload-fill" />{/snippet}Upload Files</Button>
        </Upload>
    {/snippet}
</Story>
